<template>
  <div class="control-item">
    <el-select filterable v-model="models.value1" @change="handleOptions1Change" size="mini">
      <el-option :key="i" :label="item.label" :value="item.value" v-for="(item, i) in options1"></el-option>
    </el-select>

    <el-select v-model="models.value2" @change="onChange" size="mini">
      <el-option :key="i" :label="item.label" :value="item.value" v-for="(item, i) in options2"></el-option>
    </el-select>

    <el-select loading-text="加载中" :loading="isLoadingOptions" filterable multiple v-model="models.value3" @change="onChange" size="mini">
      <el-option :key="i" :label="item.label" :value="item.value" v-for="(item, i) in options3"></el-option>
    </el-select>

    <div class="inline-block">
      <i @click="handleDel" class="iconfont icon-close"></i>
      <i @click="handleAdd" class="iconfont icon-add"></i>

      <!-- 暂定移除 编辑功能，后期可能加上，不要删除 -->
      <!-- <i @click="handleEdit" class="iconfont icon-revise"></i> -->
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import ajax from '../../../../api/ajax/ajax'

export default {
  name: 'VControlItem',

  props: {
    options: {
      type: Object,
      required: true
    },
    value: {
      type: Object,
      required: true
    }
  },

  inject: ['combineQueryURL'],

  computed: {
    options1 () {
      return this.options && this.options.options1
    },

    options2 () {
      return this.options && this.options.options2
    }
  },

  watch: {
    value (now, prev) {
      this.initModels()
      this.updateOptions3()
    }
  },

  data () {
    return {
      models: {},
      options3: [],
      isLoadingOptions: false
    }
  },

  mounted () {
    this.initModels()
    this.updateOptions3()
  },

  methods: {
    initModels () {
      this.models = Object.assign({}, this.value)
    },

    handleDel () {
      this.$emit('del')
    },

    handleAdd () {
      this.$emit('add')
    },

    // 暂定移除编辑功能，后期可能加上，不要删除
    /* handleEdit () {
      this.$emit('edit')
    }, */

    onChange () {
      this.$emit('onChange', this.models)
    },

    handleOptions1Change (value) {
      const values = value.split('-')
      const sysLab = values[0]
      const labId = values[1]
      const labTypeId = this.$parent.$parent.condition.id
      const labTypeItem = this.$parent.$parent.$parent.$parent.$parent.$parent.$parent.dataFromBackend
        .find(item => item['lab_id'] === labTypeId)

      const codeId = labTypeItem.options['lab_list']
        .find(item => item['lab_id'] === labId && item['sys_lab'] === sysLab)['code_id']

      ajax.post(this.combineQueryURL, {'code_id': codeId})
        .then(res => {
          const options = res.data
            .map(item => ({label: item['code_value_nm_cns'], value: item['code_value']}))
          options.forEach(item => {
            this.options3.push(item)
          })
          this.isLoadingOptions = false
        })
        .catch(err => {
          console.error(err)
          this.isLoadingOptions = false
        })

      this.options3 = []
      this.models.value3 = []
      this.isLoadingOptions = true
      this.onChange()
    },

    // 解决 查询条件反选时 第三个下拉框 无法正常渲染值 问题
    updateOptions3 () {
      if (this.models.value1 && this.models.value3) {
        const prevVal = this.models.value3
        this.handleOptions1Change(this.models.value1)
        this.$nextTick(() => {
          this.models.value3 = prevVal
          this.$emit('onChange', this.models)
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.control-item

  .inline-block
    display none
    .iconfont
      margin 0 10px 0 5px
      color #d8dce5
      cursor pointer

  &:hover > .inline-block
    display inline-block
</style>
